<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/erate.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/erate.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								商务合作
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">

			</view>
			<view class="display-flex space-between margin-top-40" style=" padding: 24rpx;">
				<view class="">
					<view class="font-size-44 font-weight-500">
						请选择您的合作角色
					</view>
					<view class="font-size-24 margin-top-20" style="color:#7C7C7C ;line-height: 36rpx;">
						便于我们为您提供最佳服务
					</view>
				</view>
				<!-- <image src="/static/home/sz.png" style="width: 216rpx;height: 216rpx;z-index: 1;" mode=""></image> -->
			</view>
		</view>
		<view class="padding-about-24" style="">
			<view v-for="item,index in list" :key="index" @click="zIndex == index,show = !show" class="view display-flex align-items"
				:style="index == 0?'margin-top: -64px;':'margin-top: 20rpx;'" style="z-index: 9999999;">
				<view class=" file-1">
					<view class="display-flex align-items">
						<view class="font-size-36 margin-right-20 font-weight-500">
							{{item.title}}
						</view>
						<image :src="imgaeUrl('/static/home/right.png')" style="width: 32rpx;height: 32rpx;" mode="">
						</image>
					</view>
					<view class="font-size-22 margin-top-20" style="color:#7C7C7C ;line-height: 36rpx;">
						{{item.text}}
					</view>
				</view>
				<view style="width: 224rpx;height: 180rpx;" class="display-flex flex-end align-end">
					<image :src="item.images" style="width: 160rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<uv-overlay :show="show" @click="show = false">
			<view class="width-100 height-100 display-flex flex-direction-column center align-items">
				<image :show-menu-by-longpress="true"
					:src="zIndex == 0?local.get('config').m_qrcode:zIndex == 1?local.get('config').expert_qrcode:zIndex == 2?local.get('config').business_qrcode:''"
					style="width: 50%;" mode="widthFix"></image>

				<view @click.stop="show = false" class="margin-top-30">
					<uv-icon name="close-circle" color="#FFFFFF" size="28"></uv-icon>
				</view>
			</view>
		</uv-overlay>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const show = ref(false)
	const zIndex = ref(0)
	const list= ref([])
	onLoad(function(option) {
		cooperate()
	});
	onShow(function() {});
	async function cooperate() {
		const {
			code,
			data
		} = await api.cooperate()
		if (code == 0) {
			list.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.view {
		padding: 10rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.backGround {
		width: 750rpx;
		height: 544rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>